<template>
  <div class="dashboard-container">
    <div class="welcome-section">
      <h1>欢迎使用学生管理系统</h1>
      <p>当前登录用户：{{ userStore.realName || userStore.username }}</p>
      <p>今天是：{{ currentDate }}</p>
    </div>
    
    <el-row :gutter="20" class="info-cards">
      <el-col :span="8">
        <el-card shadow="hover" class="info-card">
          <template #header>
            <div class="card-header">
              <el-icon><UserFilled /></el-icon>
              <span>学生总数</span>
            </div>
          </template>
          <div class="card-content">
            <span class="data-value">{{ studentCount }}</span>
          </div>
          <div class="card-footer">
            <el-button type="primary" text @click="router.push('/student/list')">
              查看学生列表
              <el-icon><ArrowRight /></el-icon>
            </el-button>
          </div>
        </el-card>
      </el-col>
      
      <el-col :span="8">
        <el-card shadow="hover" class="info-card">
          <template #header>
            <div class="card-header">
              <el-icon><Tools /></el-icon>
              <span>系统功能</span>
            </div>
          </template>
          <div class="card-content quick-actions">
            <el-button type="primary" @click="router.push('/student/add')">
              <el-icon><Plus /></el-icon>
              添加学生
            </el-button>
          </div>
        </el-card>
      </el-col>
      
      <el-col :span="8">
        <el-card shadow="hover" class="info-card">
          <template #header>
            <div class="card-header">
              <el-icon><Notification /></el-icon>
              <span>系统通知</span>
            </div>
          </template>
          <div class="card-content">
            <el-empty v-if="!notifications.length" description="暂无通知"></el-empty>
            <ul v-else class="notification-list">
              <li v-for="(notice, index) in notifications" :key="index" class="notification-item">
                <el-icon><InfoFilled /></el-icon>
                <span>{{ notice.content }}</span>
              </li>
            </ul>
          </div>
        </el-card>
      </el-col>
    </el-row>
    
    <el-row :gutter="20" class="chart-section">
      <el-col :span="24">
        <el-card shadow="hover">
          <template #header>
            <div class="card-header">
              <el-icon><DataAnalysis /></el-icon>
              <span>系统概览</span>
            </div>
          </template>
          <div class="card-content system-overview">
            <p>学生管理系统提供了全面的学生信息管理功能，使您能够轻松地管理学生信息、课程安排和成绩评定。</p>
            <ul class="feature-list">
              <li>
                <el-icon><Document /></el-icon>
                <span>学生信息管理 - 录入、查询和维护学生基本信息</span>
              </li>
              <li>
                <el-icon><Reading /></el-icon>
                <span>课程管理 - 课程安排与学生选课</span>
              </li>
              <li>
                <el-icon><Medal /></el-icon>
                <span>成绩管理 - 录入、统计和分析学生成绩</span>
              </li>
              <li>
                <el-icon><List /></el-icon>
                <span>报表导出 - 生成各类统计报表</span>
              </li>
            </ul>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
/**
 * 系统首页/仪表盘组件
 * 展示系统概览和快捷操作
 */
import { ref, computed, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { useUserStore } from '@/store/user'

export default {
  name: 'Dashboard',
  setup() {
    const router = useRouter()
    const userStore = useUserStore()
    
    // 学生总数
    const studentCount = ref(0)
    
    // 系统通知
    const notifications = ref([
      { content: '系统已升级到最新版本 v1.0.1' },
      { content: '欢迎使用学生管理系统' }
    ])
    
    // 当前日期
    const currentDate = computed(() => {
      const now = new Date()
      return `${now.getFullYear()}年${now.getMonth() + 1}月${now.getDate()}日`
    })
    
    // 初始化
    onMounted(() => {
      // 模拟获取学生数量
      fetchStudentCount()
    })
    
    // 获取学生数量
    const fetchStudentCount = () => {
      // 模拟API调用
      setTimeout(() => {
        studentCount.value = 128
      }, 500)
    }
    
    return {
      router,
      userStore,
      studentCount,
      notifications,
      currentDate
    }
  }
}
</script>

<style scoped>
.dashboard-container {
  padding: 20px;
}

.welcome-section {
  margin-bottom: 30px;
  padding: 20px;
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.welcome-section h1 {
  font-size: 24px;
  color: #303133;
  margin-bottom: 10px;
}

.welcome-section p {
  color: #606266;
}

.info-cards {
  margin-bottom: 20px;
}

.info-card {
  height: 100%;
}

.card-header {
  display: flex;
  align-items: center;
  font-size: 16px;
  font-weight: 600;
}

.card-header .el-icon {
  margin-right: 10px;
  font-size: 18px;
}

.card-content {
  margin: 20px 0;
  text-align: center;
}

.data-value {
  font-size: 36px;
  font-weight: bold;
  color: #409EFF;
}

.card-footer {
  text-align: center;
  margin-top: 10px;
}

.quick-actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
}

.notification-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.notification-item {
  display: flex;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid #f0f0f0;
}

.notification-item:last-child {
  border-bottom: none;
}

.notification-item .el-icon {
  color: #409EFF;
  margin-right: 10px;
}

.system-overview {
  text-align: left;
}

.feature-list {
  margin-top: 20px;
  padding-left: 0;
  list-style: none;
}

.feature-list li {
  margin-bottom: 10px;
  display: flex;
  align-items: center;
}

.feature-list .el-icon {
  color: #409EFF;
  margin-right: 10px;
}
</style> 